<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/likeAndCancel.js"></script>
    <script src="/js/queryAndBlankComment.js"></script>
    <script>
        $(function () {
            var userStr = sessionStorage.getItem('user');
            var strategyId = getParams().id;
            var like;
            var likeNum;

            // console.log(strategyId);
            //获得大攻略信息
            $.get(baseUrl + '/strategies/strategy/' + strategyId, function (data) {
                // console.log(data);
                $('.title').html(data.title);
                $('.strategies').renderValues(data);
                //设置点赞数
                likeNum = data.likeNum;
                //是否点过赞
                like = data.like + '';
                if (like == 'true') {
                    $('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').attr('style', "color: #00bbd3");
                }
            })

            // 获得攻略信息
            $.get(baseUrl + '/strategyCatalogs/' + strategyId, function (data) {
                console.log(data);
                var index = 1;
                $('.catalogs').renderValues({list: data.list}, {
                    getName: function (item, value) {
                        $(item).html(index + '/' + value);
                        index++;
                    },
                    getHref: getHref
                });
            })

            //分页获取评论信息
            listeningQuery(baseUrl + '/strategies/' + strategyId + '/comments', $('#comment'));

            //新增攻略点评
            $('#commentBtn').click(function () {
                if (!userStr) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '你还没登录,立刻登录?',
                        onClickConfirmBtn: function () {
                            window.location.href = '/login.html';
                        },
                        onClickCancelBtn: function () {
                            //改变样式
                            $("#likeBtn").removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
                        }
                    })
                    return;
                }
                window.location.href = '/mine/addComment.html?id=' + strategyId;
            });

            //查询该攻略是否有被当前用户收藏
            $.get(baseUrl + "/users/strategyCollection/" + strategyId, function (data) {
                console.log(data);
                if (data.success) {
                    //清除样式,添加样式
                    $("#collectBtn").removeClass('fa-heart-o').addClass('fa-heart');
                    $("#collectBtn").attr("data-collection", "1");
                } else {
                    $("#collectBtn").attr("data-collection", "0");
                    $("#collectBtn").removeClass('fa-heart').addClass('fa-heart-o');
                }
            })

            //查询该攻略的的收藏数
            var collectionNum;
            $.get(baseUrl + "/strategies/collections/" + strategyId, function (data) {
                console.log(data);
                //将数据填写到页面
                $("#collectionNum").html(data);
                collectionNum = data;
            });

            //点击收藏改变样子,发送请求
            $("#collectBtn").click(function () {
                //判断是否登录
                if (!userStr) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '你还没登录,立刻登录?',
                        onClickConfirmBtn: function () {
                            window.location.href = '/login.html';
                        },
                        onClickCancelBtn: function () {

                        }
                    })
                    return;
                }
                //获的当前的样式
                var collection = $("#collectBtn").attr("data-collection");
                if (collection == 1) {
                    //改变样式
                    $("#collectBtn").removeClass('fa-heart').addClass('fa-heart-o');
                    //修改collection的值
                    $("#collectBtn").attr("data-collection", "0");
                    //改变点赞数
                    $("#collectionNum").html(--collectionNum);

                    //取消收藏
                    $.ajax({
                        url: baseUrl + '/users/changeStrategyCollection/' + strategyId,
                        data: {type: "0"},
                        method: "put",
                        success: function () {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已取消收藏',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    })

                } else {
                    //改变样式
                    $("#collectBtn").removeClass('fa-heart-o').addClass('fa-heart');
                    //修改collection的值
                    $("#collectBtn").attr("data-collection", "1");
                    //改变点赞数
                    $("#collectionNum").html(++collectionNum);
                    //添加收藏
                    $.ajax({
                        url: baseUrl + '/users/changeStrategyCollection/' + strategyId,
                        data: {type: "1"},
                        method: "put",
                        success: function () {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已添加收藏',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    });

                }
            });

            //点赞或取消
            $("#likeBtn").click(function () {
                //检测是否登录

                if (!userStr) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '你还没登录,立刻登录?',
                        onClickConfirmBtn: function () {
                            window.location.href = '/login.html';
                        },
                        onClickCancelBtn: function () {
                            //改变样式
                            $("#likeBtn").removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
                        }
                    })
                    return;
                }

                if (like == 'true') {
                    like = 'false';
                    $('#likeBtn').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
                    $('#num').html(--likeNum);
                    $.ajax({
                        type: "delete",
                        url: baseUrl + '/users/cancelLike/' + strategyId + '/' + 2,//type: 1.游记;2.大攻略;3.日报;4.攻略文章

                        success: function () {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已取消',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    })
                } else {
                    like = 'true';
                    $('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
                    $('#num').html(++likeNum);
                    $.ajax({
                        type: "post",
                        url: baseUrl + '/users/like/' + strategyId + '/' + 2,//type: 1.游记;2.大攻略;3.日报;4.攻略文章
                        success: function () {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '谢谢点赞!',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    })
                }
            });

            //点击 评论图标 把id带过去
            $(".fa-commenting-o").click(function () {
                getHref:getHref
            })

            /**
             *搜索功能
             */
            $("#searchBtn").click(function () {//有内容才可以搜索
                var keyword = $("#searchInp").val()
                if (keyword == null || keyword == "") {
                    $(document).dialog({
                        titleText: '温馨提示',
                        content: '搜索内容不能为空!',
                    });
                } else {
                    window.location.href = "/searchPage.html?keyword=" + keyword + ""
                }
            })

            //加入心愿单
            $("#joinWishBtn").click(function () {
                //检测登录
                if (!userStr) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '你还没登录,立刻登录?',
                        onClickConfirmBtn: function () {
                            window.location.href = '/login.html';
                        },
                        onClickCancelBtn: function () {
                            //改变样式
                            $("#likeBtn").removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
                        }
                    })
                    return;
                }
                //添加收藏
                $.ajax({
                    url: baseUrl + '/users/saveWish/' + strategyId,
                    method: "put",
                    success: function (data) {
                        if (data.success) {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '添加心愿成功',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: data.errorMsg,
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }

                    }
                })

            })
        })
    </script>


</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-9">
            <div class="input-group-sm search">
                <input id="searchInp" class="form-control" placeholder="搜攻略文章">
            </div>
        </div>
        <div class="col-1">
            <i class="fa fa-search" id="searchBtn"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 88%">
            </i>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title">广州攻略</h5>
    <small><span render-html="browseNum">0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa fa-heart-o" data-collection="0" id="collectBtn"><span id="collectionNum"> 0</span> 收藏</i>
        <i class="fa fa-thumbs-o-up like" id="likeBtn"><span render-html="likeNum" id="num"> 0</span> 点赞</i>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">

        <div class="catalogs">
            <div render-loop="list">
                <div class="container detail">
                    <h6 render-fun="getName" render-key="list.name">01/概况</h6>
                    <div render-loop="list.details">
                        <a render-fun="getHref" render-key="list.details.id" data-url="/strategyDetails.html?id=">
                            <button class="btn" render-html="list.details.title">广州速览</button>
                        </a>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div>
                <span>价格便宜</span>
                <span>很热闹</span>
                <span>交通方便</span>
                <span>吃的很多</span>
                <span>风景优美</span>
                <span>美食很多</span>

            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a render-fun="getHref" render-key="list.user.id" data-url="/userProfiles.html?id=">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.user.nickName">喵喵</span></p>
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </span>
                        <span class="comment-date" render-html="list.createTime">2018-07-19</span>
                        <div class="comment-content">
                            <p render-html="list.content">我觉得很好</p>
                        </div>

                        <ul class="comment-img" render-loop="list.imgUrlsArr">
                            <li>
                                <img render-src="list.imgUrlsArr.self">
                            </li>
                        </ul>

                        <div class="d-flex icon">
                            <a render-key="list.id" render-fun="getHref"
                               data-url="/mine/strategyComment.html?id=">
                                <i class="fa  fa-commenting-o" style="margin-right: 10px"> 评论 <i
                                        render-html="list.commentNum">12</i> </i>
                            </a>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

</div>

<div class="operation">
    <button class="btn" id="joinWishBtn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>